<template>
  <div class="problem">
    <div class="title">问题协调情况</div>
    <div class="content">
      <div class="con" v-for="item in items" :key="item.id">
        <div class="top">
          <div class="top1">
            <div class="number">{{ item.total }}</div>
            <div class="text">{{ item.text1 }}</div>
          </div>
          <div class="top1">
            <div class="number2">{{ item.value }}</div>
            <div class="text">{{ item.text2 }}</div>
          </div>
        </div>
        <div class="bottom">
          <span :class="item.icon"></span>
          <span class="text">{{ item.name }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import { GetAssignTotal } from '@/api/index';
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      items: [
        {
          id: 1,
          text1: '共有',
          text2: '待处理',
          icon: 'icon-xiangmu1 icon'
        },
        {
          id: 2,
          text1: '共有',
          text2: '待处理',
          icon: 'icon-shenhe icon'
        },
        {
          id: 3,
          text1: '共有',
          text2: '待处理',
          icon: 'icon-zijinxunhuan icon'
        },
        {
          id: 4,
          text1: '共有',
          text2: '待处理',
          icon: 'icon-guihua icon'
        },
        {
          id: 5,
          text1: '共有',
          text2: '待处理',
          icon: 'icon-liyongjititudiyongdishiyong icon'
        },
        {
          id: 6,
          text1: '共有',
          text2: '待处理',
          icon: 'icon-qukuai icon'
        },
        {
          id: 7,
          text1: '共有',
          text2: '待处理',
          icon: 'icon-chanyeyuanqu icon'
        },
        {
          id: 8,
          text1: '共有',
          text2: '待处理',
          icon: 'icon-xiangmu2 icon'
        }
      ]
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    getData(itemTypeId, deptid) {
      GetAssignTotal({ itemTypeId: itemTypeId, deptid: deptid }).then((res) => {
        if (res.data.code == 200) {
          this.items = this.items.map((item, index) => {
            return { ...item, ...res.data.data[index] };
          });
        } else {
          alert(res.msg);
        }
      });
    }
  },

  created() {
    this.getData();
  }, //生命周期 - 创建完成（可以访问当前this实例）
  mounted() {} //生命周期 - 挂载完成（可以访问DOM元素）
};
</script>

<style scoped lang="less">
.problem {
  margin-top: 20px;
  overflow: hidden;
  margin-right: 10px;
  margin-left: 10px;
  background-color: #1391ff;
  position: relative;
  box-shadow: 0px 9px 17px -13px #e4e4e4;
  .title {
    font-size: 14px;
    font-weight: bold;
    margin: 10px 0 10px 20px;
    color: #fff;
  }
  .title::before {
    content: '';
    position: absolute;
    width: 4px;
    height: 15px;
    background-color: #fff;
    top: 12px;
    left: 8px;
  }
  .content {
    display: flex;
    margin: 20px;
    justify-content: space-around;
    .con::before {
      content: '';
      opacity: 0;
      display: block;
      width: 0;
      height: 0;
      position: absolute;
      left: 0;
      top: 0;
      border-top: 2px solid #fff;
      border-left: 2px solid #fff;
      transition: ease 0.5s;
      box-sizing: border-box;
      z-index: 1;
      pointer-events: none;
    }
    .con::after {
      content: '';
      opacity: 0;
      display: block;
      width: 0;
      height: 0;
      position: absolute;
      right: 0;
      bottom: 0;
      border-right: 2px solid #fff;
      border-bottom: 2px solid #fff;
      transition: ease 1s;
      box-sizing: border-box;
      z-index: 1;
      pointer-events: none;
    }
    .con:hover::before,
    .con:hover::after {
      width: 100%;
      height: 100%;
      opacity: 1;
    }
    .con {
      position: relative;
      width: 167px;
      height: 125px;
      margin-left: 18px;
      background-color: #008aff;
      overflow: hidden;
      cursor: pointer;
      .top {
        height: 70%;
        display: flex;
        border-bottom: 1px solid #1b9dff;
        .top1 {
          width: 50%;
          text-align: center;
          color: #fff;
          font-weight: bold;
          border-right: 1px solid #1b9dff;
          .text {
            font-size: 14px;
          }
          .number {
            font-size: 18px;
          }
          .number2 {
            font-size: 18px;
            color: #f06876;
          }
          div {
            margin-top: 15px;
          }
        }
      }
      .bottom {
        text-align: center;
        color: #fff;
        line-height: 37px;
        .icon {
          margin-right: 15px;
          vertical-align: middle;
        }
        .text {
          font-size: 12px;
          font-weight: bold;
        }
      }
    }
  }
}
</style>
